<template>
	<view>
		<u-row gutter="16" style="margin-bottom: 10px;">
			<u-col span="4" style="padding: 10px;">
				<u-button @click='preDayAc' type="primary default">前一天</u-button>
			</u-col>

			<u-col span="4">
				<u-input v-model="day"></u-input>
			</u-col>
			<u-col span="4" style="padding: 10px;">
				<u-button @click='nextDayAc' type='primary default'>后一天</u-button>
			</u-col>
		</u-row>

		<view>
			<view style="width:40%;float:left; padding: 10px; font-size: 50rpx;">
				一周营业情况
			</view>
			<view style="width:50%;float:right; padding-top: 30rpx;">
				<label  :class="{tag:true,'default':tabindex==0}" @click="tab(0)">收入</label>
				<label :class="{tag:true,'default':tabindex==1}" @click="tab(1)">车流</label>
			</view>
			<view style=" clear: both;"></view>
			
			
			
		</view>
		<view><l-echart ref="chart" @finished="init"></l-echart></view>
	
	<view>
		<view style=" margin: 30px auto; width: 600rpx; height: 200rpx; border:1px solid #ddd;">
			<u-row>
				<u-col span="6" style=" text-align: center; padding: 25px 0px;">
					<view style="font-size: 45rpx;margin-bottom: 10rpx; color: rgb(17,70,131);">{{dayTotalAmount.toFixed(2)}}</view>
						<view style="font-size: 30rpx; color: #777;">营业额(元)</view>
				</u-col>
					<u-col span="6" style=" text-align: center; padding: 25px 0px;">
						
<view style="font-size: 45rpx;margin-bottom: 10rpx; " :class="{red:dayPreDayCp<0,green:dayPreDayCp>=0}">
 <u-icon style=" display: inline-block;" name='arrow-downward' size='16' v-if='dayPreDayCp<0'></u-icon>
 <u-icon style=" display: inline-block;" name='arrow-upward' size='16' v-if='dayPreDayCp>0'></u-icon>{{dayPreDayCp.toFixed(2)}} </view>
						<view style="font-size: 30rpx; color: #777;">营业额较上日 </view>
						
					</u-col>
			</u-row>
			
		</view>
		
		
		</view>
	</view>
</template>
<style>
	.green{color: seagreen;}
	
	.red{ color:red}
	.tag {
		border: 1px solid #d1d1d1;
		font-size: 18px;
		padding: 5rpx 40rpx;
		color: #333;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.default {
		border: 0px;
		background-color: rgb(18, 71, 132);
		color: white
	}
</style>
<script>
	import service from '@/util/service.js'
	
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'

	import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';

	export default {
		components: {
			LEchart
		},
		computed: {
			dayPreDayCp(){
				return this.dayTotalAmount-this.preDayTotalAmount;
			}
},
		data() {
			return {
				tabindex:0,
				day:"",
				dayTotalAmount:0,
				
				preDayTotalAmount:0,
				preDay:"",
				option1: {
					title: {
						// text: '实时垛内温度曲线',
					},
					tooltip: {
						trigger: 'axis',
					},
					// legend: {
					// 	data: ['t','b','c','d'],
					// },
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true,
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: [
							'周一',
							'周二',
							'周三',
							'周四',
							'周五',
							'周六',
							'周日',
						],
					},
					yAxis: {
						type: 'value',
					},
					series: [{
						name: "收费",
						type: 'line',
						stack: '总量',
						data: [0, 0, 0, 0, 0, 0, 0],
					}],
				}
			}
		},
		mounted() {
		const currentDate = new Date();
		
		this.day=currentDate.toISOString().split('T')[0]; 
		currentDate.setDate(currentDate.getDate() - 1);
		 const preDate = currentDate.toISOString().split('T')[0]; 
		this.preDate=preDate;
		
			this.getWeekReport();
			// this.getCharge();
		},
		methods: {
			tab:function(index){
				this.tabindex=index;
				this.getWeekReport();
			},
			preDayAc:function(){
				   const currentDate = new Date(this.day);
				  currentDate.setDate(currentDate.getDate() - 1);
				  const formattedDate = currentDate.toISOString().split('T')[0]; // 格式化为 "YYYY-MM-DD"
				this.day=formattedDate;
				this.getWeekReport();
				
			},
			nextDayAc:function(){
				const currentDate = new Date(this.day);
				
				  currentDate.setDate(currentDate.getDate() + 1);
				  const formattedDate = currentDate.toISOString().split('T')[0]; // 格式化为 "YYYY-MM-DD"
				this.day=formattedDate;
					this.getWeekReport();
			},
			getWeekReport: function() {
				var index=this.tabindex;
						var that = this;
						var datalist = [];
						var datalist1 = [];
						var labellist = [];
						
						var day=that.day;
						var currentDate = new Date(day);
						currentDate.setDate(currentDate.getDate() - 7);
						 var preDate = currentDate.toISOString().split('T')[0]; 
						 
						 console.log(preDate);
						service.postJson('/BIZ/charge/queryweekreport', {
							begTime:preDate,
							endTime:day
							
						}, function(res) {
							console.log("返回数据=>", res);
							if (res) {
								if(res.length>0){
									var day0=res[0].dateTime.substr(0, 10);
									console.log("day0:",day0+" - "+that.day);
									if(res[0].dateTime.substr(0, 10)==that.day){
										that.dayTotalAmount=res[0].totalAmount;
									}
									if(res.length==2&&( res[1].dateTime.substr(0, 10)==that.preDay)){
										that.preDayTotalAmount=res[1].totalAmount;
									}
								}
								res.forEach(function(item) {
									datalist.unshift(item.totalAmount)
									datalist1.unshift(item.totalCount)
									labellist.unshift(item.dateTime.substr(5, 5));
								})
								that.option1.xAxis = {
									type: 'category',
									boundaryGap: false,
									data: labellist
			
								};
								if (index == 0) {
									that.option1.series = [{
										name: "收费：元",
										type: 'line',
										stack: '总量',
										data: datalist
									}];
								} else {
									that.option1.series = [{
										name: "入场车辆",
										type: 'line',
										stack: '总量',
										data: datalist1
									}];
								}
			
			
			that.$refs.chart.setOption(that.option1);
			
			
							}
						})
			
					},
   	async init() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chart.init(echarts);
				chart.setOption(this.option1)
			},
		}
	}
</script>

<style>

</style>